<template>
  <div class="systemset-business-flowset-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button type="primary" @click="handleEdit">
          添加业务流程设置
        </el-button>
      </vab-query-form-left-panel>
      <!-- <vab-query-form-right-panel :span="12">
        <el-form :inline="true" :model="queryForm" @submit.prevent>
          <el-form-item>
            <el-input
              v-model.trim="queryForm.title"
              clearable
              placeholder="请输入标题"
            />
          </el-form-item>
          <el-form-item>
            <el-button :icon="Search" type="primary" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel> -->
    </vab-query-form>

    <el-table
      :key="componentKey"
      v-loading="listLoading"
      :data="list"
      @selection-change="setSelectRows"
    >
      <el-table-column align="center" show-overflow-tooltip type="selection" />
      <el-table-column
        align="center"
        prop="CompanyName.CompanyName"
        label="适用公司"
      />
      <el-table-column
        align="center"
        label="适用业务类型"
        prop="BusinessClassName"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="流程权限设置">
        <el-table-column align="center" label="到单录入">
          <el-checkbox checked size="large" disabled />
        </el-table-column>
        <el-table-column align="center" label="确认收款">
          <template #default="{ row }">
            <!-- <el-checkbox
              :checked="row.isPayment"
              size="large"
              @change="changeCheck($event, row, 'isPayment')"
            /> -->
            <div style="height: 50px; padding: 3px">
              <el-button
                type="primary"
                size="small"
                @click="setActStaff(row, 'PaymentStaffIDs')"
              >
                设置操作人
              </el-button>
              <div>{{ row.PaymentStaff }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="开发票">
          <template #default="{ row }">
            <!-- <el-checkbox
              :checked="row.isVoicing"
              size="large"
              @change="changeCheck($event, row, 'isVoicing')"
            /> -->
            <div style="height: 50px; padding: 3px">
              <el-button
                type="primary"
                size="small"
                @click="setActStaff(row, 'VoicingStaffIDs')"
              >
                设置操作人
              </el-button>
              <div>{{ row.VoicingStaff }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="销售提单">
          <template #default="{ row }">
            <!-- <el-checkbox
              :checked="row.isSubmitOrder"
              size="large"
              @change="changeCheck($event, row, 'isSubmitOrder')"
            /> -->
            <div style="height: 50px; padding: 3px">
              <el-button
                type="primary"
                size="small"
                @click="setActStaff(row, 'SubmitOrderStaffIDs')"
              >
                设置操作人
              </el-button>
              <div>{{ row.SubmitOrderStaff }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="销售内勤审核">
          <template #default="{ row }">
            <!-- <el-checkbox
              :checked="row.isSaleReview"
              size="large"
              @change="changeCheck($event, row, 'isSaleReview')"
            /> -->
            <div style="height: 50px; padding: 3px">
              <el-button
                type="primary"
                size="small"
                @click="setActStaff(row, 'SaleReviewStaffIDs')"
              >
                设置操作人
              </el-button>
              <div>{{ row.SaleReviewStaff }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="运营内勤审核">
          <template #default="{ row }">
            <!-- <el-checkbox
              :checked="row.isOperReview"
              size="large"
              @change="changeCheck($event, row, 'isOperReview')"
            /> -->
            <div style="height: 50px; padding: 3px">
              <el-button
                type="primary"
                size="small"
                @click="setActStaff(row, 'OperReviewStaffIDs')"
              >
                设置操作人
              </el-button>
              <div>{{ row.OperReviewStaff }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="分单">
          <template #default="{ row }">
            <div style="height: 50px; padding: 3px">
              <el-button
                type="primary"
                size="small"
                @click="setActStaff(row, 'AssignOrderStaffIDs')"
              >
                设置操作人
              </el-button>
              <div>{{ row.AssignOrderStaff }}</div>
            </div>
            <!-- <el-checkbox
              :checked="row.isAssignOrder"
              size="large"
              @change="changeCheck($event, row, 'isAssignOrder')"
            /> -->
            <!-- <el-button size="small">设置操作人</el-button> -->
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否启用">
          <template #default="{ row }">
            <el-switch
              v-model="row.nState"
              class="mt-2"
              inline-prompt
              :active-value="1"
              :inactive-value="0"
              :active-icon="Check"
              :inactive-icon="Close"
              @change="changeState(row)"
            />
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <edit ref="editRef" @fetch-data="fetchData" />
    <act-staff ref="actstaffRef" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import {
    doState,
    makeBusinessFlow,
    getList,
    doDelete,
  } from '@/api/systemsetBusinessFlowset'
  import Edit from './components/SystemsetBusinessFlowsetEdit'
  import ActStaff from './components/SetActStaff'
  import { Delete, Plus, Search } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'SystemsetBusinessFlowset',
    components: { Edit, ActStaff },
    setup() {
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        editRef: null,
        actstaffRef: null,
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          title: '',
        },
      })

      const setSelectRows = (val) => {
        state.selectRows = val
      }

      const handleMake = async () => {
        const { msg } = await makeBusinessFlow()
        $baseMessage(msg, 'success', 'vab-hey-message-success')
        await fetchData()
      }

      const handleEdit = (row) => {
        if (row.BusinessFlowID) {
          state.editRef.showEdit(row)
        } else {
          state.editRef.showEdit()
        }
      }

      const changeState = (row) => {
        let stateMsg = ''
        if (row.nState == 0) stateMsg = '你确定要停用吗？'
        if (row.nState == 1) stateMsg = '你确定要启用吗？'
        $baseConfirm(stateMsg, null, async () => {
          const setState = {
            BusinessFlowID: row.BusinessFlowID,
            nState: row.nState,
          }
          const { msg } = await doState(setState)
          $baseMessage(msg, 'success', 'vab-hey-message-success')
          await fetchData()
        })
      }

      const setActStaff = (row, act) => {
        if (row.BusinessFlowID) {
          const setrow = {
            BusinessFlowID: row.BusinessFlowID,
            BusinessClassID: row.BusinessClassID,
            BusinessClassName: row.BusinessClassName,
            CompanyID: row.CompanyID,
            [act]: row[act],
          }
          state.actstaffRef.showEdit(setrow, act)
        }
      }

      const handleDelete = (row) => {
        if (row.id) {
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ ids: row.id })
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            await fetchData()
          })
        } else {
          if (state.selectRows.length > 0) {
            const ids = state.selectRows.map((item) => item.id).join()
            $baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids })
              $baseMessage(msg, 'success', 'vab-hey-message-success')
              await fetchData()
            })
          } else {
            $baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
          }
        }
      }
      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }
      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
        fetchData()
      }
      const queryData = () => {
        state.queryForm.pageNo = 1
        fetchData()
      }
      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { list, total },
        } = await getList(state.queryForm)
        state.list = list
        state.total = total
        state.listLoading = false
      }
      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        setSelectRows,
        handleMake,
        handleEdit,
        setActStaff,
        handleDelete,
        handleSizeChange,
        handleCurrentChange,
        changeState,
        queryData,
        fetchData,
        Delete,
        Plus,
        Search,
      }
    },
  })
</script>
